<template>
  <div class="app-container" v-if="list">
    <div style="border: 1px solid #dcdcdc;padding: 20px;margin-bottom: 20px;">
      <el-steps :active="1">
        <el-step title="竞拍成功" description="2021-05-06 11:11:11" />
        <el-step title="买家付款" description="2021-05-06 11:11:11" />
        <el-step title="拍品上拍" description="2021-05-06 11:11:11" />
        <el-step title="拍品成交" />
      </el-steps>
    </div>

    <el-row :gutter="20">
      <el-col :xs="24" :sm="12">
        <el-card class="box-card">
          <div slot="header">订单信息</div>
          <div style="font-size: 14px;">
            <span
              style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;"
              >订单状态</span
            >
            <span>
              {{
                list.status == 0
                  ? "待支付"
                  : list.status == 1
                  ? "待发货"
                  : list.status == 2
                  ? "待收货"
                  : list.status == 3
                  ? "已完成"
                  : list.status == 4
                  ? "锁定期"
                  : list.status == 5
                  ? "拍卖中-首次上架"
                  : list.status == 6
                  ? "拍卖中-流拍"
                  : list.status == 7
                  ? "拍卖中-支付逾期"
                  : list.status == 8
                  ? "拍卖中-重新上架"
                  : list.status == 9
                  ? "已成交"
                  : list.status == 10
                  ? "退款完成"
                  : list.status == 11
                  ? "退货"
                  : list.status == 12
                  ? "退货中"
                  : ""
              }}
            </span>
          </div>
          <div style="font-size: 14px;margin-top: 10px;">
            <span
              style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;"
              >锁定截止</span
            >
            <span></span>
          </div>
          <div style="font-size: 14px;margin-top: 10px;">
            <span
              style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;"
              >订单编号</span
            >
            <span>{{ list.order_no }}</span>
          </div>
          <div style="font-size: 14px;margin-top: 10px;">
            <span
              style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;"
              >交易编号</span
            >
            <span>{{ list.transaction_no }}</span>
          </div>
          <div style="font-size: 14px;margin-top: 10px;">
            <span
              style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;"
              >订单类型</span
            >
            <span></span>
          </div>
          <div style="font-size: 14px;margin-top: 10px;">
            <span
              style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;"
              >支付方式</span
            >
            <span>{{
              list.pay_type == 1
                ? "微信支付"
                : list.pay_type == 2
                ? "支付宝"
                : list.pay_type == 3
                ? "后台确认"
                : list.pay_type == 4
                ? "微信公众号"
                : ""
            }}</span>
          </div>
          <div style="font-size: 14px;margin-top: 10px;">
            <span
              style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;"
              >卖家店铺</span
            >
            <span>{{ list.shopping.name }}</span>
          </div>
          <div style="font-size: 14px;margin-top: 10px;">
            <span
              style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;"
              >店铺类型</span
            >
            <span></span>
          </div>
          <div style="font-size: 14px;margin-top: 10px;">
            <span
              style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;"
              >交易服务费</span
            >
            <span>--</span>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-card class="box-card">
          <div slot="header">买家信息</div>
          <div style="font-size: 14px;">
            <span
              style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;"
              >账号</span
            >
            <span></span>
          </div>
          <div style="font-size: 14px;margin-top: 10px;">
            <span
              style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;"
              >姓名</span
            >
            <span></span>
          </div>
          <div style="font-size: 14px;margin-top: 10px;">
            <span
              style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;"
              >买家店铺</span
            >
            <span></span>
          </div>
          <div style="font-size: 14px;margin-top: 10px;margin-bottom: 130px;">
            <span
              style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;"
              >店铺类型</span
            >
            <span></span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header">拍品信息</div>
          <el-table
            :key="tableKey"
            ref="table"
            v-loading="listLoading"
            :data="tableList"
            border
            fit
            highlight-current-row
            style="width: 100%;"
          >
            <el-table-column label="拍品编号" prop="order_no" align="center" />
            <el-table-column label="拍品" align="center">
              <template slot-scope="{ row }">
                <el-image
                  style="width: 100px; height: 100px"
                  v-if="row.product"
                  :src="$store.state.settings.imgHost + row.product.image"
                  :preview-src-list="[
                    $store.state.settings.imgHost + row.product.image
                  ]"
                />
                <span
                  style="vertical-align: top;margin-left: 10px;"
                  v-if="row.product"
                  >{{ row.product.name }}</span
                >
              </template>
            </el-table-column>
            <el-table-column label="拍品类型" align="center">
              <template slot-scope="{ row }" v-if="row.product">{{
                row.product.type == 0
                  ? "首次上架"
                  : row.product.type == 1
                  ? "续拍商品"
                  : ""
              }}</template>
            </el-table-column>
            <el-table-column label="出价" align="center" prop="offer" />
            <el-table-column
              align="center"
              label="平台服务费"
              prop="deal_server_money"
            />
            <el-table-column align="center" label="实付" prop="real_pay" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getOrdersDetail } from "@/api/common";

export default {
  name: "OrdersDetailFx",
  data() {
    return {
      tableKey: 0,
      list: null,
      tableList: [],
      listLoading: true
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      getOrdersDetail(this.$route.params.id)
        .then(res => {
          this.list = res.data;
          this.tableList = res.data.product;
        })
        .finally(() => {
          this.listLoading = false;
        });
    }
  }
};
</script>

<style></style>
